<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <a-row :gutter="[0,16]">
      <!-- TODO 搜索 -->
      <a-col :span="24">
        <a-form layout="inline" :form="searchForm">

          <a-form-item label="发布者">
            <a-input
                placeholder="发布者"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="发布时间">
            <a-input
                placeholder="发布者"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="状态">
            <a-select
                show-search
                placeholder="请选择展示状态"
                style="width: 180px"
            >
              <a-select-option value="1">
                正常
              </a-select-option>

              <a-select-option value="0">
                停用
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item>
            <a-button type="primary">
              <a-icon type="search"/>
              搜索
            </a-button>
          </a-form-item>

        </a-form>
      </a-col>

    </a-row>
    <a-row :gutter="[0,16]">
      <a-col :span="24">
        <a-button type="primary">添加</a-button>
      </a-col>
    </a-row>

    <a-row :gutter="[0,16]">
      <!-- 分页列表区 -->
      <a-col :span="24">
        <a-table
            :rowKey="rowKey"
            :columns="columns"
            :data-source="data"
            :defaultExpandAllRows="true"
            :pagination="pagination"
            bordered
        >
          <a :href="url" slot="image" slot-scope="url" target="_blank">点击查看</a>
          <!-- 在职状态 -->
          <span slot="status" slot-scope="status, item">
            <a-popconfirm
                placement="topLeft"
                ok-text="确认"
                cancel-text="取消"
                @confirm="onChangeStatus(item, status)"
            >
              <template slot="title"> 确定要修改吗? </template>
              <a-switch
                  checked-children="展示"
                  un-checked-children="不展示"
                  :checked="status === 1"
                  size="large"
              />
            </a-popconfirm>
          </span>
        </a-table>

      </a-col>

    </a-row>

  </div>
</template>

<script>
import {mapState} from 'vuex'
import {getBanners, stopBanner} from "@/services/banner";

export default {
  name: 'Banner',
  data() {
    return {
      columns: [
        {
          title: '编号',
          dataIndex: 'bannerId',
        },
        {
          title: '展示顺序',
          dataIndex: 'orderNum'
        },
        {
          title: '发布者',
          dataIndex: 'publisher',
        },{
          title: '创建时间',
          dataIndex: 'createTime'
        },
        {
          title: '发布时间',
          dataIndex: 'publishTime'
        },{
          title: '过期时间',
          dataIndex: 'expiration'
        },
        {
          title: '图片链接',
          dataIndex: 'image',
          scopedSlots: {
            customRender: 'image'
          }
        },
        {
          title: '图片指向',
          dataIndex: 'url'
        },

        {
          title: '展示状态',
          dataIndex: 'status',
          scopedSlots: {
            customRender: 'status'
          }
        },
        {
          title: '备注',
          dataIndex: 'remark',
        }
        , {
          title: '操作',
          dataIndex: 'operator',
          scopedSlots: {customRender: 'operator'}
        },

      ],
      data: [],
      rowKey: '',
      searchForm: {},
      pagination: {
        current: 1,
        pageSize: 15,
        pageSizeOptions: ["15", "20", "30"],
        showTotal: (total) => {
          return " 共 " + total + " 条";
        },
        total: 0,
      }
    }
  },
  computed: {
    ...mapState('setting', ['pageMinHeight']),

  },
  mounted() {
    // 页面挂载时

    // 获取数据
    this.getBanners()
  },
  methods: {
    getBanners() {
      getBanners().then((res) => {
        console.log(res)
        this.data = res.data.data.list
        // this.pagination.current = res.data.pageNum
        // this.pagination.total = res.data.total
      })
    },
    onChangeStatus(item, status) {
      if (item.status == 0) {
        this.$message.error("当前状态不允许被修改!")
        return
      }
      console.log("确认修改", status);
      let afterCode = this.changeStatusValue(status);
      console.log(afterCode)
      stopBanner(item.bannerId).then((res)=>{
        if (res.data.code == 1000){
          item.status = afterCode
          this.$message.success("修改成功")
        }else{
          this.$message.success("修改失败")
        }

      })
    },
    changeStatusValue(status) {
      if (status == 1) {
        return 0;
      } else if (status == 0) {
        return 1;
      }
    }
  }
}
</script>

<style scoped lang="less">

</style>